import styled from 'styled-components'
import Icon from '@/components/Icon'
export const IconMoveTop = styled(Icon)`
	width: 30px;
	height: 30px;
	background-position: -120px -425px;
	&:hover {
		background-position: -150px -425px;
	}
`
export const IconMoveUp = styled(Icon)`
	width: 30px;
	height: 30px;
	background-position: 0 -455px;
	&:hover {
		background-position: -30px -455px;
	}
`
export const IconMoveDown = styled(Icon)`
	width: 30px;
	height: 30px;
	background-position: -120px -455px;
	&:hover {
		background-position: -150px -455px;
	}
`
export const IconMoveBottom = styled(Icon)`
	width: 30px;
	height: 30px;
	background-position: -240px -425px;
	&:hover {
		background-position: -270px -425px;
	}
`
export const IconMoveTopDisabled = styled(Icon)`
	width: 30px;
	height: 30px;
	background-position: -210px -425px;
	cursor: default;
`
export const IconMoveUpDisabled = styled(Icon)`
	width: 30px;
	height: 30px;
	background-position: -90px -455px;
	cursor: default;
`
export const IconMoveDownDisabled = styled(Icon)`
	width: 30px;
	height: 30px;
	background-position: -210px -455px;
	cursor: default;
`
export const IconMoveBottomDisabled = styled(Icon)`
	width: 30px;
	height: 30px;
	background-position: -330px -425px;
	cursor: default;
`
